<mat-stepper orientation="horizontal" [linear]="true" #stepper>
  <mat-step [stepControl]="formGroup">
    <form [formGroup]="formGroup">
      <ng-template matStepLabel>基本信息</ng-template>
      <mat-form-field appearance="outline">
        <mat-label>标题</mat-label>
        <input matInput formControlName="title" placeholder="请输入标题" required>
        <mat-error *ngIf="formGroup.get('title')?.errors?.['required']">标题为必填项</mat-error>
        <mat-error *ngIf="formGroup.get('title')?.errors?.['minlength']">标题至少需要3个字符</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label>描述</mat-label>
        <textarea matInput formControlName="description" placeholder="请输入描述" required></textarea>
        <mat-error *ngIf="formGroup.get('description')?.errors?.['required']">描述为必填项</mat-error>
        <mat-error *ngIf="formGroup.get('description')?.errors?.['maxlength']">描述不能超过500个字符</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label>分类</mat-label>
        <mat-select formControlName="category" required>
          <mat-option *ngFor="let category of categories" [value]="category">{{category}}</mat-option>
        </mat-select>
        <mat-error *ngIf="formGroup.get('category')?.errors?.['required']">分类为必填项</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label>标签</mat-label>
        <mat-select formControlName="tags" multiple required>
          <mat-option *ngFor="let tag of availableTags" [value]="tag">{{tag}}</mat-option>
        </mat-select>
        <mat-error *ngIf="formGroup.get('tags')?.errors?.['required']">至少选择一个标签</mat-error>
      </mat-form-field>

      <mat-slide-toggle formControlName="isPublic">是否公开</mat-slide-toggle>

      <div class="image-upload">
        <input type="file" #fileInput (change)="onFileSelected($event)" accept="image/*" style="display: none">
        <button mat-raised-button color="primary" (click)="fileInput.click()">
          <mat-icon>cloud_upload</mat-icon>
          上传图片
        </button>
        <div *ngIf="imagePreview" class="image-preview">
          <img [src]="imagePreview" alt="预览图片">
          <button mat-icon-button color="warn" (click)="removeImage()">
            <mat-icon>delete</mat-icon>
          </button>
        </div>
      </div>

      <div class="button-container">
        <button mat-raised-button color="primary" (click)="onSubmit()" [disabled]="!formGroup.valid">提交</button>
      </div>
    </form>
  </mat-step>

  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>第二步</ng-template>
      <mat-form-field appearance="outline">
        <mat-label>字段4</mat-label>
        <input matInput formControlName="field4" placeholder="请输入字段4" required>
        <mat-error *ngIf="secondFormGroup.get('field4')?.errors?.['required']">此字段为必填项</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label>字段5</mat-label>
        <input matInput formControlName="field5" placeholder="请输入字段5" required>
        <mat-error *ngIf="secondFormGroup.get('field5')?.errors?.['required']">此字段为必填项</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label>字段6</mat-label>
        <input matInput formControlName="field6" placeholder="请输入字段6" required>
        <mat-error *ngIf="secondFormGroup.get('field6')?.errors?.['required']">此字段为必填项</mat-error>
      </mat-form-field>

      <div class="button-container">
        <button mat-button matStepperPrevious>上一步</button>
        <button mat-button matStepperNext [disabled]="!secondFormGroup.valid">下一步</button>
      </div>
    </form>
  </mat-step>

  <mat-step [stepControl]="thirdFormGroup">
    <form [formGroup]="thirdFormGroup">
      <ng-template matStepLabel>第三步</ng-template>
      <mat-form-field appearance="outline">
        <mat-label>字段7</mat-label>
        <input matInput formControlName="field7" placeholder="请输入字段7" required>
        <mat-error *ngIf="thirdFormGroup.get('field7')?.errors?.['required']">此字段为必填项</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label>字段8</mat-label>
        <input matInput formControlName="field8" placeholder="请输入字段8" required>
        <mat-error *ngIf="thirdFormGroup.get('field8')?.errors?.['required']">此字段为必填项</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label>字段9</mat-label>
        <input matInput formControlName="field9" placeholder="请输入字段9" required>
        <mat-error *ngIf="thirdFormGroup.get('field9')?.errors?.['required']">此字段为必填项</mat-error>
      </mat-form-field>

      <div class="button-container">
        <button mat-button matStepperPrevious>上一步</button>
        <button mat-raised-button color="primary" (click)="onSubmit()" [disabled]="!thirdFormGroup.valid">提交</button>
      </div>
    </form>
  </mat-step>
</mat-stepper>